<template>
  <div>
    <h3>App组件 -- {{ slotname }}</h3>
    <button @click="slotname = 'aa'">aaaa</button>
    <button @click="slotname = 'bb'">bbbb</button>
    <button @click="slotname = 'cc'">cccc</button>
    <child>
      <!-- 
        动态插槽,插槽名称是一个动态值
       -->
      <template #[slotname]>
        <h3>aaaa</h3>
      </template>
    </child>
  </div>
</template>

<script>
import child from './components/child/index.vue'
export default {
  components: {
    child
  },
  data() {
    return {
      slotname: 'aa'
    }
  }
}
</script>

<style lang="scss" scoped></style>
